import * as THREE from "three";
//导入轨道
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'


//使用控制器去查看3D物体

// console.log(THREE);

//控制3D物体的移动


//1.创建场景
const scene=new THREE.Scene()

//2.创建相机
//透视相机
//                                       角度
const camera=new THREE.PerspectiveCamera(75,window.innerHeight/window.innerWidth,
0.1,
1000
)
//设置相机位置参数
camera.position.set(0,0,10);

//添加相机到场景当中
scene.add(camera);

//添加物体
//创建几何体
const cubeGeometry=new THREE.BoxGeometry();

// 设置材质
const cubeMeterial=new THREE.MeshBasicMaterial({
    color:0xffff00
})

//根据集合体和材质去创建物体
const cube=new THREE.Mesh(cubeGeometry,cubeMeterial)

//模拟坐标
const axesHelper=new THREE.AxesHelper(5)

// 将几何体添加到场景当中
scene.add(cube);
//添加坐标轴
scene.add(axesHelper);

//初始化渲染器
const renderer=new THREE.WebGL1Renderer();
//设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight*2);

console.log(renderer);
//将渲染的内容添加到画布上
document.body.appendChild(renderer.domElement);

//使用渲染器，通过相机将场景渲染进来
// renderer.render(scene,camera);

//创建轨道控制器
const controls=new OrbitControls(camera,renderer.domElement);
console.log(cube);
function render(){
    cube.position.x +=0.01;
    if(cube.position.x > 5){
    cube.position.x=0;
    }

    renderer.render(scene,camera);
    requestAnimationFrame(render);
}
render();

 
